react-hook-formに依存しないInput Component

装飾だけやるComponent

こんなので良い

code:ts

type Props = React.ComponentProps<'input'> & {

error: string | undefined;

};

export const Input = forwardRef<HTMLInputElement, Props>(

({ error, ...props }, ref) => {

return (

<div>

<input

{...props}

className="w-full border border-gray-300 px-4 py-2"

ref={ref}

{error != null && <ErrorText>{error}</ErrorText>}

</div>

);

Input.displayName = 'Input';

react-hook-formでuncontrolledに使える

code:ts

<Input

{...register('password')}

type="password"

placeholder="パスワード"

error={errors.password?.message}

useStateなどでcontrolledにも使える

code:ts